<template>
    <div class="login-div">
       <Row class="login-row">
           <Col :xs="{ span: 18, offset: 3}" :md="{ span: 20, offset: 2 }" :lg="{ span: 8, offset: 8 }" style="margin-top: 10%">
           <div>
              <p class="title-logo">
                  <img src="/static/image/zt.png" alt="">
              </p>
               <span class="right-login"><img src="/static/image/login1.png" alt=""></span>
               <div class="formUser">
                   <Form ref="formCustom" :model="formCustom" :rules="ruleCustom">
                       <FormItem  prop="username">
                           <Input type="text" v-model="formCustom.username" placeholder="用户名"></Input>
                       </FormItem>
                       <FormItem prop="passwd">
                           <Input type="password" v-model="formCustom.passwd" placeholder="密码"></Input>
                       </FormItem>
                       <FormItem>
                           <Button type="warning" @click="handleSubmit('formCustom')" long>Submit</Button>
                       </FormItem>
                   </Form>
               </div>
           </div>
           </Col>
       </Row>
    </div>
</template>
<script>
    const md5 = require('md5');
    import commonFunc from '../../../../static/js/public'
    export default{
        data(){
            return{
                formCustom:{
                    username:'',
                    passwd:''
                },
                ruleCustom: {
                    username: [
                        { required: true, message:'账户', trigger: 'blur' }
                    ],
                    passwd: [
                        { required: true, message:'密码',  trigger: 'blur' }
                    ],
                }
            }
        },
        mounted:function () {

        },
        methods:{
            handleSubmit (name) {
                let _shelf = this;
                _shelf.formCustom.passwd  = md5(_shelf.formCustom.passwd);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        _shelf.fetch({
                            url:'/login',
                            method:'POST',
                            data:_shelf.formCustom,
                        }).then(function (response) {
                             if(response.data.ret==1){
                                 commonFunc.setCookie('access_token',response.data.access_token,60*60*24);
                                 commonFunc.setCookie('username',response.data.user,60*60*24);
                                 _shelf.$router.push({path:'/main'});
                             }
                        });
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
        }
    }
</script>
<style scoped>
    .login-div{
        height: 100%;
        background: url(/static/image/bg-login.png) no-repeat;
    }
    .login-row{
        height: 100%;
        position: relative;

    }
    .login-row>div{
        background-color: #ebe3e3;
        border-radius: 5px;
        box-shadow: 8px 8px 9px 3px #e56b2224;
    }
    .right-login{
        position: absolute;
        right: 10px;
        top: 80px;
    }
    .ivu-form-item{
        width: 40%;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 18px;
    }
    .title-logo{
        text-align: center;
        padding: 20px;
    }
    .formUser{
        margin-bottom: 80px;
    }
    .ivu-btn{
        margin-top: 10px;
    }
</style>